@@include('header.htm', {
  "title": "Spinner - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "spinner"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Spinner</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "spinner"
	})
</div>

<div class="card card-default">
	<div class="card-body py-4">
		<p> Simple loading spinners animated with CSS. <a href="http://tobiasahlin.com/spinkit/" target="_blank">See demo</a>. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.</p>
	</div>
</div>

<div class="row">
	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Rotating Plane </h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-rotating-plane"></div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Chase</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-chase">
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Double Bounce</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px" >
				<div class="sk-double-bounce">
					<div class="double-bounce1"></div>
					<div class="double-bounce2"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Wave</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-wave">
					<div class="rect1"></div>
					<div class="rect2"></div>
					<div class="rect3"></div>
					<div class="rect4"></div>
					<div class="rect5"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Wandering Cubes</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-wonder-cube">
					<div class="cube1"></div>
					<div class="cube2"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Pulse </h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-pulse"></div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2> Chasing Dots </h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-chasing-dots">
					<div class="dot1"></div>
					<div class="dot2"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Three Bounce</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-three-bounce">
					<div class="bounce1"></div>
					<div class="bounce2"></div>
					<div class="bounce3"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Circle</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-circle">
					<div class="sk-circle1 sk-child"></div>
					<div class="sk-circle2 sk-child"></div>
					<div class="sk-circle3 sk-child"></div>
					<div class="sk-circle4 sk-child"></div>
					<div class="sk-circle5 sk-child"></div>
					<div class="sk-circle6 sk-child"></div>
					<div class="sk-circle7 sk-child"></div>
					<div class="sk-circle8 sk-child"></div>
					<div class="sk-circle9 sk-child"></div>
					<div class="sk-circle10 sk-child"></div>
					<div class="sk-circle11 sk-child"></div>
					<div class="sk-circle12 sk-child"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Cube Grid </h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-cube-grid">
					<div class="sk-cube sk-cube1"></div>
					<div class="sk-cube sk-cube2"></div>
					<div class="sk-cube sk-cube3"></div>
					<div class="sk-cube sk-cube4"></div>
					<div class="sk-cube sk-cube5"></div>
					<div class="sk-cube sk-cube6"></div>
					<div class="sk-cube sk-cube7"></div>
					<div class="sk-cube sk-cube8"></div>
					<div class="sk-cube sk-cube9"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Fading Circle</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-fading-circle">
					<div class="sk-circle1 sk-circle"></div>
					<div class="sk-circle2 sk-circle"></div>
					<div class="sk-circle3 sk-circle"></div>
					<div class="sk-circle4 sk-circle"></div>
					<div class="sk-circle5 sk-circle"></div>
					<div class="sk-circle6 sk-circle"></div>
					<div class="sk-circle7 sk-circle"></div>
					<div class="sk-circle8 sk-circle"></div>
					<div class="sk-circle9 sk-circle"></div>
					<div class="sk-circle10 sk-circle"></div>
					<div class="sk-circle11 sk-circle"></div>
					<div class="sk-circle12 sk-circle"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-4 col-md-6 col-xl-3">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Folding Cube</h2>
			</div>

			<div class="card-body d-flex align-items-center justify-content-center" style="height: 160px">
				<div class="sk-folding-cube">
					<div class="sk-cube1 sk-cube"></div>
					<div class="sk-cube2 sk-cube"></div>
					<div class="sk-cube4 sk-cube"></div>
					<div class="sk-cube3 sk-cube"></div>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
